<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flag {
            position: absolute;
            top: 4px;
            width: 0;
            height: 16px;
            border-left: 1px solid #ccc;
        }
        
        p {
            position: relative;
            /* font-size: 16px; */
        }
        
        .box {
            width: 400px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
        }
        
        .box:hover {
            background-color: red;
        }
        
        .showAndHide {
            display: none;
        }
        
        button {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">

        <p>我人傻了<span class="flag"></span></p>

    </div>

    <button>点我加大字体</button>


</body>

<script>
    var p = document.querySelector('p');
    var flag = document.querySelector('.flag');
    p.addEventListener('click', function(e) {
        console.log('p被点啦');
        console.log(e.pageX, e.pageY);
        console.log(this.offsetLeft, this.offsetHeight);

        var acho = e.pageX - this.offsetLeft;

        acho = Math.round(acho / 16);
        console.log(acho);

        flag.style.left = 16 * acho + 'px';
    });

    // ----------------------------------------------------------
    // 模拟光标闪烁

    var time = setInterval(function() {
        flag.classList.toggle('showAndHide');
    }, 1000);

    // --------------------------------------------------------
    // 点击按钮加大字体(本质是将p标签换成h1标签)

    var btn = document.querySelector('button');
    var box = document.querySelector('.box');
    btn.addEventListener('click', function() {

        // console.log('按钮被点了');

        console.log(document.getSelection());
        var text = document.getSelection().anchorNode;
        console.dir(text);

        var p = text.parentNode;
        console.log(p);

        p.parentNode.removeChild(p);

        var h1 = document.createElement('h1');
        h1.innerHTML = text.wholeText;

        box.appendChild(h1);





    })
</script>

</html>